<template>
    <div id="follow-list">
        <!-- 关注列表 -->
        <div class="deposit-content">
            <div class="top-bg">
                <van-nav-bar class="header" fixed :border="false" @click-left="diffBack">
                        <div class="left"
                            slot="left">
                            <van-icon name="arrow-left"
                                    size="24px"
                                    color="#fff" />
                        </div>
                        <div class="title"
                            slot="title">{{title}}</div>
                    </van-nav-bar>
            </div>
            <div class="reset-wrapper">
                <div class="reset-content">
                    <van-pull-refresh v-model="isLoading" @refresh="onRefresh"> 
                        <van-list
                            :loading="loading"
                            :finished="finished"
                            finished-text="没有更多了"
                            @load="onLoad"
                            class="list-box"
                        >
                                <van-swipe-cell :right-width="80" v-for="(item, index) in list" :key="index">
                                    <van-cell-group>
                                        <div class="each-list">
                                            <div class="list-details">
                                                <div class="img-case">
                                                    <img :src="item.pictureUrl" alt="" v-if="item.pictureUrl">
                                                    <img src="@/assets/img/designer/personalCenter/defaultHeadPortrait.png" alt="" v-else>
                                                </div>
                                                <div class="name-case">{{item.userName}}</div>
                                            </div>
                                        </div>
                                    </van-cell-group>
                                    <span slot="right" class="cancel-btn" @click="confirmDialog(item.uid,item.userName)">删除</span>
                                </van-swipe-cell>
                            
                        </van-list>
                    </van-pull-refresh>
                    <div class="no-data" v-if="isShow">
                        <div class="img-case"><img src="@/assets/img/public/search.png" alt=""></div>
                        <div class="word-case">暂无数据</div>
                    </div>
                </div>
            </div>
      </div>
    </div>
</template>
<script>
import Vue from "vue"
import { SwipeCell, Dialog } from 'vant';
Vue.use(SwipeCell);
Vue.use(Dialog);
import {getuserUid} from '@/utils/auth.js'
export default {
  components: {
  },
  data() {
    return {
      title: '关注名单',
      list: [],
      loading: false,
      isLoading: false,
      finished: false,
      pageNum: 0,
      pageSize: 7,
      oladParams: {},
      isShow: false
    }
  },
  created() {
  },
  methods: {
      diffBack(){
          this.$router.push('/designer/personalCenter')
      },
      onClose(clickPosition, instance) {
      switch (clickPosition) {
        case 'left':
        case 'cell':
        case 'outside':
          instance.close();
          break;
        case 'right':
          Dialog.confirm({
            message: '确定删除吗？'
          }).then(() => {
            instance.close();
          });
          break;
      }
    },
    confirmDialog(id,name) {
        Dialog.confirm({
        message: '您需要将' + name + '移除关注名单吗？'
        }).then(() => {
        this.designerDelBlacklist(id)
        }).catch(()=>{
            this.$toast('取消成功')
        })
    },
    // 删除关注名单
    async designerDelBlacklist(id) {
      const SPC = await HTTP("designerDelBlacklist", {
        uid: id
      });
      if (SPC.code == 200) {
        this.$toast({
            message: "删除成功"
        })
        this.onRefresh()
        // this.list = this.list.filter(e => e.uid !== id)
      } else {
        this.$toast(SPC.msg|| '服务器异常')
      }
    },
    // 关注列表
    async requestList(params, cb) {
      this.oladParams = params
      try {
            let responseList = await HTTP('designerBlackList', params)                
            if(responseList.code !== 200){
                this.$toast(responseList.msg || '服务器异常')
                return
            }
            let res = responseList.data.list.map(e => {
                return {
                    ...e
                }
            })
            cb && cb(res)
        } catch (error) {
            this.$toast('数据开小差了')
            cb && cb()
        }
    },
    onRefresh(){
        this.isLoading = true
        this.loading = true
        this.pageNum = 1
        this.requestList({...this.oladParams, pageNum: 1}, (data) => {
            this.list = data
            // 太慢了不差半秒，太快需要延时（因为用户在滑动的时候有心理准备，速度太快了反而担心这是假的）
            setTimeout(() => {
                this.isLoading = false
                this.loading = false
                // 因为是刷新，所以，这个是执行onLoad，进入onLoad之后会进行list的loading的修改状态，从而重新进入onLoad
                this.onLoad()
            }, 500)
        })
    },
    onLoad(){
        this.loading = true
        this.pageNum += 1
        let params = {
            userUid: getuserUid(),
            type: 1,
            pageNum: this.pageNum,
            pageSize: this.pageSize,
        }
        setTimeout(() => {
            this.requestList(params, (data) => {
                this.loading = false
                if(params.pageNum === 1){
                    this.list = data
                }else{
                    this.list.push(...data)
                }
                if(data && data.length === 0){
                    this.finished = true
                } else if (this.list.length==0) {
                    this.isShow = true
                    this.finished = false
                }
            })
        }, 0)
    },
  }
};
</script>
<style lang="scss" scoped>
#follow-list {
    position: absolute;
    width: 100%;
    height: 100%;
    background: #F9F9F9;
    p{
        margin-bottom: 0.3rem!important;
    }
    .deposit-content{
        position: relative;
        width: 100%;
        height: 100%;
        .top-bg{
            width: 100%;
            background: #fff;
            border-bottom-left-radius: 0.5rem;
            border-bottom-right-radius: 0.5rem;
            .header {
                background: #5E8EFE;
                color: #ffffff;
                height: 0.92rem;
                .title {
                    color: #ffffff;
                    font-size: 0.35rem;
                    }
            }
        }
        .list-box{
            height: calc(100vh - .92rem);
            overflow: auto;
        }
        .reset-wrapper{
            position: fixed;
            width: 100%;
            top: 0.92rem;
            left: 0;
            right: 0;
            overflow-y: scroll;
            bottom: 0rem;
            .reset-content{
                width: 100%;
                box-sizing: border-box;
                border-radius: 0.1rem;                
                .each-list{
                    width: 100%;
                    box-sizing: border-box;
                    padding: 0.3rem 0.24rem;
                    .list-details{
                        div{
                            display: inline-block;
                        }
                        .img-case{
                            width: 0.9rem;
                            height: 0.9rem;
                            margin-right: 0.2rem;
                            img{
                                width: 0.9rem;
                                height: 0.9rem;
                            }
                        }
                        .name-case{
                            height: 0.9rem;
                            line-height: 0.9rem;
                            color: #656565;
                            font-size: 0.28rem;
                            font-family: PingFangSC-Regular;
                            font-weight: 400;
                            vertical-align: top;
                        }
                    }
                }
                .cancel-btn{
                    display: inline-block;
                    width:1.6rem; 
                    height: 100%;
                    background: #FF5959; 
                    text-align: center;
                    line-height: 1.5rem;
                    color: #fff;
                    font-family: PingFangSC-Regular;
                    font-weight: 400;
                    font-size: 0.28rem;
                }
                .no-data{
                    background: #F9F9F9;
                    .img-case{
                        width: 100%;
                        height: 3rem;
                        width: 3.74rem;
                        margin: 0 auto;
                            img{
                                width: 3.74rem;
                                height: 3rem;
                            }
                    }
                    .word-case{
                        width: 100%;
                        height: 0.4rem;
                        line-height: 0.4rem;
                        color: #959595;
                        font-family: PingFangSC-Regular;
                        font-weight: 400;
                        text-align: center;
                    }
                }
            }
        }
    }
}
</style>
